<template>
	<view>
		<form @submit="formSubmit">
			<!-- 表单内容 -->
			<view class="section">
				<text class="section_title">班级类型</text>
				<picker class="section_content" :range="classType" :value="index" @change="picker">
					<text>
						{{classType[index]}}
					</text>
				</picker>
			</view>
			<view class="section">
				<text class="section_title">班级名称</text>
				<input class="section_content" name="className" :value="className" />
			</view>
			<view class="section">
				<text class="section_title">单节价格</text>
				<input class="section_content" name="classPrice" :value="classPrice" />
			</view>
			<view class="section">
				<text class="section_title">授课老师</text>
				<view style="width: calc(90% - 200rpx);">
					<view class="section_content" style="width: 100%; color: #999;" @click="jumpToSelect('teather')">选择老师</view>
					<!-- 老师信息 -->
					<view class="teacher_info" v-if="classTeacher">
						<image mode="heightFix" :src="classTeacher.avatarUrl"></image>
						<view class="teacher_detail">
							<view>{{classTeacher.realName}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section">
				<text class="section_title">班级课程</text>
				<view style="width: calc(90% - 200rpx);">
					<view class="section_content" style="width: 100%; color: #999;" @click="jumpToSelect('courses')">添加课程</view>
					<!-- 展示选择的课程 -->
					<view class="course_info" v-for="(item, index) in courseList" :key="index">
						<image mode="aspectFit" :src="item.imageUrl" @click="selectCourse(index)"></image>
						<view class="course_detail">
							<view @click="selectCourse(index)" style="width: 300rpx;">
								<view>《{{item.name}}》</view>
								<text style="font-size: 30rpx;margin: 10rpx;color: #FF5A5F;">￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section">
				<text class="section_title">班级学生</text>
				<view style="width: calc(90% - 200rpx);">
					<view class="section_content" style="width: 100%; color: #999;" @click="jumpToSelect('students')">添加学生</view>
					<!-- 学生信息 -->
					<view class="teacher_info" v-for="(item, index) in classStudents" :key="index">
						<image mode="heightFix" :src="item.avatarUrl"></image>
						<view class="teacher_detail">
							<view>{{item.realName}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 提交按钮 -->
			<button class="submitButton" form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	let that;
	export default {
		data() {
			return {
				_id: null,
				classType: [
					'钢琴', '吉他', '架子鼓', '声乐', '古筝', '非洲鼓', '主持', '尤克里里'
				],
				index: 0,
				classTeacher: '',
				classStudents: [],
				classCourses: [],
				courseList: [],		// 用于展示的课程
				students: [],
				className: '',
				classPrice: ''
			}
		},
		onLoad(e) {
			that = this;
			if(e.index){
				that.index = e.index;
			}
			if(e.item){
				let classCourses = JSON.parse(e.item);
				// console.log(classCourses);
				that.className = classCourses.name;
				that.classPrice = classCourses.price;
				switch(classCourses.type){
					case '钢琴':
						that.index = 0;
						break;
					case '吉他':
						that.index = 1;
						break;
					case '架子鼓':
						that.index = 2;
						break;
					case '声乐':
						that.index = 3;
						break;
					case '古筝':
						that.index = 4;
						break;
					case '非洲鼓':
						that.index = 5;
						break;
					case '主持':
						that.index = 6;
						break;
					case '尤克里里':
						that.index = 7;
						break;
				}
				// 获取老师
				db.collection('user').where({
					openId: classCourses.teacher
				}).get().then(res=>{
					that.classTeacher = res.data[0];
				})
				// 获取学生
				that.getStudents(classCourses.students);
				that.students = classCourses.students;
				// 获取课程
				classCourses.courses.forEach(item=>{
					that.getCourses(item)
				})
				// 获取班级_id，用于标识
				that._id = classCourses._id;
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中……'
			})
			// 获取全局变量
			let courseInfo = getApp().globalData.courseInfo;
			let classTeacher = getApp().globalData.classTeacher;
			let students = getApp().globalData.students;
			// 判断是否删除了课程
			let courseId = getApp().globalData.courseId;
			let index = getApp().globalData.index;
			let delect = getApp().globalData.delect;
			if(courseInfo){
				console.log(courseInfo);
				that.getCourses(courseInfo);
			}
			if(classTeacher){
				that.classTeacher = classTeacher;
			}
			if(students){
				that.getStudents(students);
			}
			if(delect){
				that.courseList.splice(index, 1);
				that.classCourses.splice(index, 1);
				// 清空全局变量
				getApp().globalData.delect = false;
			}
			uni.hideLoading();
		},
		methods: {
			getStudents(students) {
				console.log('调用方法');
				// 将学生数组清空
				that.classStudents = [];
				that.students = [];
				let flag = true;
				students.forEach(item =>{
					// 学生信息
					db.collection('user').where({
						openId: item
					}).get().then(res=>{
						let result = res.data[0];
						that.classStudents.push(result);
						if(getApp().globalData.students){
							that.students = getApp().globalData.students;
						}
					})
				})
			},
			getCourses(courseInfo) {
				// 修改或添加标志位，true表示为新增
				let flag = true;
				// 课程信息
				db.collection('course').where({
					_id: courseInfo._id
				}).get().then(res=>{
					let result = res.data[0];
					console.log(result);
					cloudbase.getTempFileURL({
						fileList: [result.imageUrl]
					}).then(res => {
						result.imageUrl = res.fileList[0].tempFileURL
					});
					// 判断是添加还是修改
					for(let i = 0; i < that.classCourses.length; i++){
						if(that.classCourses[i]._id == courseInfo._id){
							that.courseList[i] = result;
							that.classCourses[i] = courseInfo;
							flag = false;
						}
					}
					if(flag) {
						that.courseList.push(result);
						that.classCourses.push(courseInfo);
					}
					// 清空全局变量
					getApp().globalData.courseInfo = null;
				})
			},
			picker(res) {
				this.index = res.detail.value;
			},
			// 提交班级
			formSubmit(res) {
				// console.log('班级价格' + res.detail.value.classPrice);
				// console.log('班级名称' + res.detail.value.className);
				// console.log('班级类型' + that.classType[that.index]);
				// console.log('上课老师' + that.classTeacher.openId);
				// console.log('学生列表' + that.students);
				// console.log('课程列表' + that.classCourses);
				// console.log('机构id' + getApp().globalData.userInfo.institutionId);
				// 判断是否为空
				if(res.detail.value.classPrice == null){
					uni.showToast({
						title: '加入价格不能为空',
						duration: 1500
					})
					return false;
				}
				if(res.detail.value.className == null){
					uni.showToast({
						title: '班级名称不能为空',
						duration: 1500
					})
					return false;
				}
				if(that.classTeacher.openId == null){
					uni.showToast({
						title: '请选择老师',
						duration: 1500
					})
					return false;
				}
				if(that.students.length < 1){
					uni.showToast({
						title: '请选择学生',
						duration: 1500
					})
					return false;
				}
				if(that.classCourses.length < 1){
					uni.showToast({
						title: '请选择课程',
						duration: 1500
					})
					return false;
				}
				// 保存到班级数据表中
				// 判断是保存还是更新
				if(that._id == null){
					db.collection('class').add({
						name: res.detail.value.className,
						price: res.detail.value.classPrice,
						type: that.classType[that.index],
						teacher: that.classTeacher.openId,
						students: that.students,
						courses: that.classCourses,
						institutionId: getApp().globalData.userInfo.institutionId,
					}).then(res=>{
						// 清空全局变量
						getApp().globalData.classTeacher = null;
						getApp().globalData.students = null;
						uni.showToast({
							title: '创建成功',
							duration: 1500
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					})
				}else{
					db.collection('class').where({
						_id: that._id
					}).update({
						name: res.detail.value.className,
						price: res.detail.value.classPrice,
						type: that.classType[that.index],
						teacher: that.classTeacher.openId,
						students: that.students,
						courses: that.classCourses,
						institutionId: getApp().globalData.userInfo.institutionId
					}).then(res=>{
						// 清空全局变量
						getApp().globalData.classTeacher = null;
						getApp().globalData.students = null;
						uni.showToast({
							title: '修改成功',
							duration: 1500
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					})
				}
			},
			jumpToSelect(label) {
				uni.navigateTo({
					url: '../chooseContent/chooseContent?classType=' + that.classType[that.index] + '&label=' + label + '&students=' + that.students
				})
			},
			selectCourse(index) {
				uni.navigateTo({
					url: '../chooseTime/chooseTime?time=' + JSON.stringify(that.classCourses[index]) + '&classId=' + this._id + '&index=' + index
				})
			}
		}
	}
</script>

<style>
	page {
		padding: 10rpx 30rpx;
		font-size: 30rpx;
		background-color: #F3F5F7;
	}

	.section {
		display: flex;
		margin: 30rpx 0rpx;
		/* align-items: center; */
	}

	.section_title {
		width: 150rpx;
		margin-top: 15rpx;
	}

	.section_content {
		width: calc(90% - 200rpx);
		background-color: #fff;
		border-radius: 16rpx;
		padding: 15rpx 0rpx;
		text-align: center;
		height: 40rpx;
		color: #555;
	}

	.submitButton {
		width: 70%;
		margin-top: 80rpx;
		border-radius: 16rpx;
		background-color: #FD973F;
		color: #fff;
	}
	
	.course_info{
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
	}
	.course_info image{
		height: 150rpx;
		width: 150rpx;
	}
	.course_detail{
		display: flex;
		width: max-content;
		align-items: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		width: calc(100% - 150rpx);
	}
	.author{
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #999;
	}
	.course_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		margin-right: 0rpx;
		line-height: 50rpx;
		height: 50rpx;
	}
	.course_active{
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
	}
	
	.teacher_info{
		background-color: #fff;
		padding: 20rpx;
		/* border-radius: 24rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
	}
	.teacher_info image{
		height: 80rpx;
		margin-right: 60rpx;
		border-radius: 50%;
	}
	.teacher_detail image{
		height: 35rpx;
		margin: 10rpx 5rpx;
	}
	.teacher_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		margin-right: 0;
		line-height: 58rpx;
	}
</style>
